<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
    navigationBarTitleText: '攻略社区',
  },
}
</route>
<template>
  <Loading v-if="loading"></Loading>
  <view v-else class="overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="flex px-2 w-7/12 justify-between">
      <view class="">
        <wd-button type="icon" icon="add-circle" @click="goPostPage()"></wd-button>
      </view>
      <view class="">
        <wd-button type="icon" icon="location"></wd-button>
        <text>{{ currentLocation }}</text>
      </view>
    </view>
    <wd-tabs v-model="tab" sticky animated swipeable @change="handleClick">
      <block v-for="(item, index) in tabs" :key="index">
        <wd-tab :title="`${item.name}`" :name="index">
          <view class="bg-gray-100 pt-4 pb-2 px-2">
            <view v-for="post in data.records" :key="post.id">
              <CardComp :post="post" />
            </view>
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

<script lang="ts" setup>
import Loading from '@/components/loading/loading.vue'
import { getPostAPI, Response } from '@/service/post/post'
import CardComp from './components/card.vue'
defineOptions({
  name: 'Manual',
})
const currentLocation = ref('成都')
const tabs = ref([
  { id: 0, name: '骑行攻略' },
  { id: 1, name: '骑行交流' },
  { id: 2, name: '骑行推荐' },
  { id: 3, name: '骑行吐槽' },
])
const tab = ref<number>(0)
const handleClick = (e) => {
  tab.value = e.index
  // console.log(e)
  // console.log(tab.value)
}

const {
  loading: loading,
  error: err,
  data: data,
} = useRequest<Response>(() => getPostAPI(tab.value, currentLocation.value), { immediate: true })
const goPostPage = () => {
  uni.navigateTo({
    url: `/pages-sub/post/post`,
  })
}
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<style>
.main-title-color {
  color: #d14328;
}
</style>
